<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        #tab1 .aui-active {
            color: #f23030;
            border-bottom: 2px solid #f23030;
        }

        .myshop_main_one {
            margin-bottom: 0.3rem;
            margin-top: 0;
            /*justify-content: inherit;*/
        }

        .aui-list-item-middle {
            padding-left: 0.75rem;
        }

        .aui-radio:checked {
            background-color: #f23030;
            border: solid 1px #f23030;
        }

        .aui-toast {
            width: 9.5rem;
            background: #999;
            opacity: 0.7;
            height: 4rem;
            min-height: 4rem;
            line-height: 4rem;
        }

        .aui-toast-content {
            color: #fff;
        }

        .collect_head {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            background-color: #fff;
            padding: 0.5rem;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: start;
            -webkit-align-items: center;
            align-items: center;
            z-index: 9;
        }

        .collect_head img {
            display: inline-block;
        }

        .collect_head span {
            font-size: 0.8rem;
            line-height: 0.8rem;
        }

        .dowm {
            width: 0.5rem;
            margin-left: 0.2rem;
            vertical-align: middle;
        }

        .mor {
            width: 0.6rem;
            margin-right: 0.2rem;
        }

        #app {
            padding-top: 2rem;
        }

        .near_sort_list {
            width: 100%;
            background: #fff;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
            position: absolute;
            ;
            z-index: 9;
        }

        .near_sort_list li {
            border-bottom: 1px solid #e8e8e8;
            padding: 0.5rem 0.75rem;
            font-size: 0.6rem;
        }

        #app.sort .near_sort_list {
            max-height: 500px;
        }

        .myshop_mainCon {
            padding: 0 0.25rem;
        }

        .myshop_margin div {
            display: inline-block;
        }

        .myshop_marginImg img {
            width: 0.8rem;
        }

        .myshop_mainCon {
            min-height: calc(100vh - 2.5rem);
        }

        .myshop_content_one {
            width: 49.5%;
            margin-right: 1%
        }

        .myshop_main_one .myshop_content_one:last-of-type {
            margin-right: 0;
        }
        .myshop_content_one_text_three {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            /*line-height: 0.8rem;
            height: 1.6rem;*/
        }

        .myshop_content_one_money {
            line-height: 1.2;
        }
        .myshop_content_one_img {
          width: 100%;
          height: auto;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak style="box-sizing:border-box">
        <div class="collect_head">
            <span>全部商品({{count}})<img class="dowm" src="../../image/dowm.png" alt=""></span>
            <span class="near_title_r"><img class="mor" src="../../image/two/sort.png" alt="">默认排序</span>
        </div>
        <div class="near_sort_list">
            <ul>
                <li @click="sort = 1">综合排序</li>
                <li @click="sort = 2">销量</li>
                <li @click="sort = 3">价格低到高</li>
                <li @click="sort = 4">价格高到底</li>
            </ul>
        </div>
        <div class="myshop_mainCon aui-refresh-content">

            <div class="myshop_main_one" style="justify-content:space-between;" v-for='data in list'>
                <div class="myshop_content_one" v-for="item in data" @click="openSWin(item.goods_id,item.type,item.area_type,item.goods_name)">
                    <div class="myshop_content_one_img" :style="'background:url('+item.logo_pic+') center center/cover no-repeat;'"></div>
                    <div class="myshop_content_one_text_three myshop_margin">{{item.goods_name}}</div>
                    <div v-if='item.type == 1 || item.type == 3 && item.area_type == 1' class="myshop_content_one_money myshop_margin">￥{{item.price}}</div>
                    <div v-if='item.type == 2' class="myshop_content_one_money myshop_margin">{{item.price}}积分</div>
                    <div v-if='item.type == 3 && item.area_type == 0' class="myshop_content_one_money myshop_margin">{{item.price}}兑换币</div>
                    <div class="myshop_content_one_text_one myshop_margin" style="justify-content:space-between;">

                        <div class="myshop_marginImg" @click="goCollect(item.goods_id,$event)">
                            <img src="../../image/cp_footer3_N.png" alt="">
                        </div>

                        <div>
                            <div class="myshop_content_one_text_two">销量:</div>
                            <div class="myshop_content_one_num">{{item.sales}}</div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript">
    apiready = function() {

        $('body').on('click', '.near_title_r,.near_sort_list li', function() {
            $('#app').toggleClass('sort')
            $('.near_title_r').html($(this).html())
        })
        api.parseTapmode();

        var app = new Vue({
            el: '#app',
            data: { //所有需要用到的数据
                token: '',
                sort: 1,
                page: 1,
                totalpage: 1,
                list: [],
                count: '0',
            },
            created: function() { //创建好vue对象后执行，可处理数据
                var $_this = this;
                $_this.token = $api.getStorage('token') || ''

                $_this.gx($_this.sort)

                var scroll = new auiScroll({
                    listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                    distance: 40 //判断到达底部的距离，isToBottom为true
                }, function(ret) {
                    if (ret.isToBottom) {
                        $_this.page++
                            if ($_this.page > $_this.totalpage) {
                                $_this.page = $_this.totalpage
                                return
                            }
                        api.ajax({
                            url: window.Url.Freeucenter_myCollection,
                            method: 'post',
                            data: {
                                values: {
                                    token: $_this.token,
                                    sort: $_this.sort,
                                    page: $_this.page
                                }
                            },
                            timeout: 300,
                        }, function(ret, err) {
                            if (ret) {
                                //  api.alert({ msg: JSON.stringify(ret) });
                                if (ret.re == 1) {
                                    $_this.list = $_this.list.concat($_this.group(ret.data.list, 2))
                                    $_this.$nextTick(function() {
                                        $('.myshop_content_one_img').height($('.myshop_content_one_img').width())
                                    })
                                }

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }

                })
            },
            mounted: function() { //页面渲染完成后执行，不包括需要请求的数据
                // 如在这里开始渲染地图!!! initMap()
                var $_this = this;
                $_this.setRefresh()
            },
            methods: { //专用于定义方法
                gx: function(sort) {
                    var $_this = this;
                    $_this.page = 1;
                    api.ajax({
                        url: window.Url.Freeucenter_myCollection,
                        method: 'post',
                        data: {
                            values: {
                                token: $_this.token,
                                sort: sort,
                                page: $_this.page
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.re != 1) {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                $_this.list = ''
                                $_this.count = '0'
                            } else {

                              console.log(JSON.stringify(ret))
                                $_this.list = $_this.group(ret.data.list, 2)
                                $_this.totalpage = ret.sum_page
                                $_this.count = ret.data.count
                                $_this.$nextTick(function() {
                                    $('.myshop_content_one_img').height($('.myshop_content_one_img').width())
                                })
                            }
                            // console.log(JSON.stringify(ret));
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                goCollect: function(id, ev) {
                    var $_this = this;
                    ev.stopPropagation();
                    api.ajax({
                        url: window.Url.Freegoods_collectGoods,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                goodsId: id,
                                type: 2,
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            api.toast({
                                msg: ret.info,
                                duration: 2000,
                                location: 'bottom'
                            });
                            if (ret.re == 1) {
                                $_this.gx($_this.sort)
                            }

                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })

                },
                group: function(data, num) {
                    var len = 0
                    var arr = []
                    var arr2 = []
                    num = num || 4
                    for (var key in data) {
                        len++
                        arr.push(data[key])
                    }
                    for (var i = 0; i < len; i += num) {
                        arr2.push(arr.slice(i, i + num));
                    }
                    return arr2
                },
                openSWin: function(id, type, area_type, name) {
                    var area_types = area_type || ''
                    if (type == 1 || area_types == 1 && type == 3) {
                        api.openWin({
                            name: 'commodity',
                            url: './../one_frame/commodity.html',
                            pageParam: {
                                name: name,
                                id: id
                            }
                        });
                    } else if (type == 2) {

                    } else if (type == 3 && area_types == 0) {
                        api.openWin({
                            name: 'commodity_convert',
                            url: './../one_frame/commodity_convert.html',
                            pageParam: {
                                name: name,
                                id: id
                            }
                        })
                    }
                },
                setRefresh: function() {
                    var $_this = this;
                    var pullRefresh = new auiPullToRefresh({
                        container: document.querySelector('.aui-refresh-content'),
                        triggerDistance: 100
                    }, function(ret) {
                        if (ret.status == "success") {
                            $_this.page = 1;
                            api.ajax({
                                url: window.Url.Freeucenter_myCollection,
                                method: 'post',
                                data: {
                                    values: {
                                        token: $_this.token,
                                        sort: $_this.sort,
                                        page: $_this.page
                                    }
                                }
                            }, function(ret, err) {
                                if (ret) {
                                    if (ret.re != 1) {
                                        api.toast({
                                            msg: ret.info,
                                            duration: 2000,
                                            location: 'bottom'
                                        });
                                        $_this.list = ''
                                        $_this.count = '0'
                                    } else {
                                        $_this.list = $_this.group(ret.data.list, 2)
                                        $_this.totalpage = ret.sum_page
                                        $_this.count = ret.data.count
                                        $_this.$nextTick(function() {
                                            $('.myshop_content_one_img').height($('.myshop_content_one_img').width())
                                        })
                                    }
                                    // console.log(JSON.stringify(ret));
                                } else {
                                    api.alert({
                                        msg: JSON.stringify(err)
                                    });
                                }
                            })
                            setTimeout(function() {
                                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                            }, 500)
                        }
                    })
                }
            },
            watch: {
                sort: function() {
                    var $_this = this;
                    $_this.gx($_this.sort)
                }
            }
        })

    };
</script>

</html>
